<template>
    <div class="main">
      <el-row :gutter="20">
          <el-col :span="isCollapse?0:3">
              <el-menu
               :router="true"
                mode="vertical" class="nav"
                :default-active="onRoutes"
                active-text-color="#000"
                background-color="#F5F5F5"
                :collapse="isCollapse">
                  <el-menu-item :index="sub.index" v-for="sub in subs" :key="sub.index">
                      <span slot="title">{{sub.title}}</span>
                  </el-menu-item>
              </el-menu>
          </el-col>
          <el-col :span="isCollapse?24:21" class="content">
              <router-view></router-view>
          </el-col>
      </el-row>
      </div>
  </template>
  
  <script>
  import bus from './bus'
  export default {
      name:'ShowCom',
      props:['children'],
      mounted(){
        
      },
      watch:{
        children:{
            handler(nVal,oVal){
                localStorage.setItem('subs',JSON.stringify(nVal));
                this.subs = JSON.parse(localStorage.getItem('subs'));
            }
        }
      },
      computed: {
        // 计算当前激活index
        onRoutes() {
            // console.log(this.$route.path);
            return this.$route.path.replace('/', '');
        }
    },
      mounted(){
        // 判断本地是否有subs二级菜单信息，有的话展示并跳转到第一个子菜单
        if(localStorage.getItem('subs')){
            this.subs = JSON.parse(localStorage.getItem('subs'));
        }
      },
      beforeDestroy(){
          localStorage.removeItem('subs');
          bus.$off('collapse');
      },
      created(){
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            // console.log(msg);
            this.isCollapse = msg;
        })
      },
      data(){
          return{
              isCollapse:false,
              subs:null
          }
      }
  }
  </script>
  
  <style scoped>
  .main{
      padding-right: 10px;
      background-color: #FFFFFF;
      height: 100%;
  }
  .el-row{
      height: 100%;
  }
  .el-col{
      height: 100%;
  }
  .nav{
      border: 1px solid #ccc;
      height: 100%;
      overflow: hidden;
  }
  .el-menu-item{
      margin-top: 20px;
      text-align: center;
  }
  .el-menu-item.is-active{
     background-color: #E6E9EF !important;
  }
  .content{
      height: 95%;
      margin-top: 20px;
      /* overflow: hidden; */
      /* border: 1px solid #CDCDCD; */
  }
  </style>